<template>
<!-- 先画出整个区域 -->
<div class='icons'>
	<!-- con循环以及可以左右拖动 使用swiper组件-->
	<swiper  :options="swiperOption">
		<swiper-slide v-for='(page,index) of pages' :key='index'>
	    <div class='icon' v-for='icon of page' v-bind:key='icon.id'>
		<div class='icon-img'>
		<img class='icon-img-content' :src='icon.imgUrl'>
		</div>
	    <p class="icon-desc">{{icon.desc}}</p> 
	    </div>
     </swiper-slide>
    </swiper>
</div>
</template>
<script>
//将数据放到data里面
//实现多页切换
	export default{
		name:'HomeIcon',
		props:{
			iconList:Array
		},
		data:function(){
			return {swiperOption:{autoPlay:false}}
		},
		computed:{
			//生成一个二维数组
			pages:function(){
			 var pages=[];
			 this.iconList.forEach((item,index)=>{
			 	var page=Math.floor(index/8);
			 	if(!pages[page]){
			 		pages[page]=[];
			 	}
			 	pages[page].push(item);
			 });
			 return pages;
		}}}
</script>
<style lang='stylus' scoped>
@import '~styles/varibles.styl'
@import '~styles/iconfont/mixins.styl'
.icons >>> .swiper-container
	height:0
	padding-bottom:50%
.icons
	margin-top:0.2rem
	overflow:hidden
	height:0
	width:100%
	padding-bottom:50%
	.icon
		position:relative
		overflow:hidden
		float:left
		height:0
		width:25%
		padding-bottom:25%
		.icon-img
			position:absolute
			top:0
			left:0
			right:0
			width:100%
			bottom:0.44rem
			box-sizing:border-box
			padding:0.1rem
			.icon-img-content
				height:100%
				display:block
				margin:0 auto
		.icon-desc
			position:absolute
			left:0
			right:0
			bottom:0
			height:0.44rem
			line-height:0.44rem 
			color:$fontColor
			text-align:center
			ellipsis()

</style>